<template>
  <div id="userData">
    <el-row>
      <el-col :span="10" class="box-card">
        <el-card :body-style="cardBody" v-loading="loading1">
          <el-descriptions title="注册用户及增长视图">
          </el-descriptions>
          <div class="userTypeSelect">
            <el-radio-group v-model="radio1" size="mini" @input="changeData">
              <el-radio-button label="1">最近3个月</el-radio-button>
              <el-radio-button label="2">最近6个月</el-radio-button>
              <el-radio-button label="3">最近12个月</el-radio-button>
            </el-radio-group>
          </div>
          <line-chart-user ref="lineChart" :chart-data="lineChartData" :datetimes="datetimes"
                           :interval="intervalNm" :powerColor="powerColor"
                           :powerMax="powerMax" :powerType="powerType" :powerUnit="powerUnit"/>
        </el-card>

      </el-col>
      <el-col :span="14" class="box-card">
        <el-card :body-style="cardBody" v-loading="loading2">
          <el-descriptions title="注册用户日增长视图">
          </el-descriptions>
          <div class="userTypeSelect">
            <el-radio-group v-model="radio2" size="mini">
              <el-radio-button label="30D">最近30天</el-radio-button>
            </el-radio-group>
          </div>
          <line-chart-user2 ref="lineChart" :chart-data="lineChartData2" :datetimes="datetimes2"
                           :interval="intervalNm" :powerColor="powerColor"
                           :powerMax="powerMax" :powerType="powerType" :powerUnit="powerUnit"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10" class="box-card">
        <el-card style="height: 518px" v-loading="loading3">
          <el-descriptions :title="'首充用户分布图（前' + limit + '）'">
          </el-descriptions>
          <bin-chart-user v-if="binData.length > 0" ref="binChart" :pieData="binData"/>
        </el-card>
      </el-col>
      <el-col :span="7" class="box-card">
        <el-card>
          <el-descriptions :title="'用户累计订单数排行榜（前' + limit1 + '）'">
          </el-descriptions>
          <el-table
            v-loading="loading4"
            size="mini"
            :data="tableData1"
            style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              width="50">
              <template slot-scope="scope">
                <i v-if="scope.$index == 0" class="el-icon-medal topColor1"  >
                  <i class="inSideNum">1</i>
                </i>
                <i v-if="scope.$index == 1" class="el-icon-medal topColor2"  >
                  <i class="inSideNum">2</i>
                </i>
                <i v-if="scope.$index == 2" class="el-icon-medal topColor3" >
                  <i class="inSideNum">3</i>
                </i>
                <div v-if="scope.$index > 2">{{scope.$index + 1}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="用户昵称"
              >
            </el-table-column>
            <el-table-column
              prop="phoneNum"
              label="注册手机号"
              width="86">
              <template slot-scope="scope">
                {{scope.row.phoneNum.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}
              </template>
            </el-table-column>
            <el-table-column
              width="105"
              align="center"
              prop="showNumStr"
              label="累计订单量">
              <template slot-scope="scope">
                <span style="color: #1890ff; font-weight: bold; font-size: 14px;">{{(scope.row.showNumStr)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="7" class="box-card">
        <el-card>
          <el-descriptions :title="'用户累计消费额排行榜（前' + limit2 + '）'">
          </el-descriptions>
          <el-table
            v-loading="loading5"
            size="mini"
            :data="tableData2"
            style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              width="50">
              <template slot-scope="scope">
                <i v-if="scope.$index == 0" class="el-icon-medal topColor1" style="font-size: 30px;" >
                  <i class="inSideNum">1</i>
                </i>
                <i v-if="scope.$index == 1" class="el-icon-medal topColor2" style="font-size: 30px;" >
                  <i class="inSideNum">2</i>
                </i>
                <i v-if="scope.$index == 2" class="el-icon-medal topColor3" style="font-size: 30px;" >
                  <i class="inSideNum">3</i>
                </i>
                <div v-if="scope.$index > 2">{{scope.$index + 1}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="用户昵称"
            >
            </el-table-column>
            <el-table-column
              prop="phoneNum"
              label="注册手机号"
              width="86">
              <template slot-scope="scope">
                {{scope.row.phoneNum.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}
              </template>
            </el-table-column>
            <el-table-column
              width="115"
              align="center"
              prop="showNumStr"
              label="累计消费额(元)">
              <template slot-scope="scope">
                <span style="color: red; font-weight: bold; font-size: 14px;">{{(scope.row.showNumStr)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { getUserStatistics, getUserStatisticsBin, getUserStatisticsFee, getUserStatisticsOrder } from "@/api/business/statistics";
  import LineChartUser from '@/views/dashboard/LineChartUser1'
  import LineChartUser2 from '@/views/dashboard/LineChartUser2'
  import BinChartUser from '@/views/dashboard/BinUser'

  export default {
    components: {
      LineChartUser,
      LineChartUser2,
      BinChartUser
    },
    data() {
      return {
        limit: 5,
        limit1: 10,
        limit2: 10,
        cardBody: {
          backgroundColor: '',
        },
        queryParams: {
          type: '2',
          num: '12'
        },
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        loading5: false,
        types: [
          { type: 2, num: 12 },
          { type: 3, num: 6 },
          { type: 3, num: 12 },
          { type: 1, num: 30 }
        ],
        radio1: '1',
        radio2: '30D',
        textcount: '用户数据',
        powerMax: {},
        powerUnit: [],
        powerColor: '#5470C6',
        intervalNm: 0,
        powerType: '',
        datetimes: [],
        datetimes2: [],
        lineChartData: {
          expectedData: [],
          dataV: []
        },
        lineChartData2: {
          expectedData: [
          ],
          dataV: [
          ]
        },
        binData:  [],
        tableData1: [],
        tableData2: []
      }
    },
    async created() {
      await Promise.all([
        this.getLineChartData(),
        this.getLineChartData2(),
        this.getBinChartData(),
        this.getUserFee(),
        this.getUserOrder()
      ])
    },
    methods: {
      async getLineChartData() {
        this.loading1 = true
        let res = await getUserStatistics(this.queryParams)
        res.data.chartDatasForAll.forEach(item=>{
          this.datetimes.push(item.dateTime)
          this.lineChartData.expectedData.push(item.val)
        })
        res.data.chartDatasForNew.forEach(item=>{
          this.lineChartData.dataV.push(item.val)
        })
        this.loading1 = false
      },
      async getLineChartData2() {
        this.loading2 = true
        let res = await getUserStatistics(this.types[3])
        res.data.chartDatasForAll.forEach(item=>{
          this.datetimes2.push(item.dateTime)
          this.lineChartData2.expectedData.push(item.val)
        })
        res.data.chartDatasForNew.forEach(item=>{
          this.lineChartData2.dataV.push(item.val)
        })
        this.loading2 = false
      },
      async getBinChartData() {
        this.loading3 = true
        let res = await getUserStatisticsBin()
        this.limit = res.data.length
        res.data.forEach(item=>{
          this.binData.push({
            value: item.num,
            name: item.stationName
          })
        })
        this.loading3 = false
      },
      changeData(e) {
        this.datetimes = []
        this.lineChartData = {
          expectedData: [],
          dataV: []
        }
        switch (e) {
          case '1':
            this.queryParams = this.types[0]
            break;
          case '2':
            this.queryParams = this.types[1]
            break;
          case '3':
            this.queryParams = this.types[2]
            break;
        }
        this.getLineChartData()
      },
      async getUserFee() {
        this.loading5 = true
        let res = await getUserStatisticsFee()
        this.tableData2 = res.data
        this.limit2 = res.data.length
        this.loading5 = false
      },
      async getUserOrder() {
        this.loading4 = true
        let res = await getUserStatisticsOrder()
        this.tableData1 = res.data
        this.limit1 = res.data.length
        this.loading4 = false
      }
    }
  }
</script>
<style scoped>
  #userData {
    padding: 20px;

  }
  .box-card{
    padding: 10px;
  }
  .userTypeSelect{
    text-align: right;
    line-height: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  .el-icon-medal{
    position: relative;
    font-size: 30px;
  }
  .inSideNum{
    position: absolute;
    left: 38%;
    top: 42%;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
  }
  .topColor1{
    color: gold;
  }
  .topColor2{
    color: #c0c0c0;
  }
  .topColor3{
    color: #b5a642;
  }
</style>
